<!DOCTYPE html>
<html lang="Zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/mian.css">
    <!-- <link rel="stylesheet" href="./css/reset.css"> -->
    <title>酷炫时钟</title>
</head>
<body>
    <div id="app">
        <div class="year">
            <p>星期{{str[bjdate.week]}}</p>
            <p>{{`${bjdate.year}年${str[bjdate.month+1]}月${str[bjdate.day+1]}日`}}</p>
            <p>JavaScript</p>
        </div>
        <div class="hours" :style="{transform:`rotate(${bjdate.hour*15}deg)`}">
            <div :class="{hours_childs:1,hours_childs_active:index===bjdate.hour}" :style="{transform:`translateY(-50%) rotate(-${index*15}deg)`}" v-for="(hours,index) in 24" :key="index">
                <span class="childs_text">
                    {{`${str[hours-1]}时`}}
                </span>
            </div>
        </div>
        <div class="minuteds" :style="{transform:`rotate(${bjdate.minute*6}deg)`}">
            <div :class="{minuteds_childs:1,minuteds_childs_active:index===bjdate.minute}" :style="{transform:`translateY(-50%) rotate(-${index*6}deg)`}" v-for="(minuteds,index) in str" :key="index">
                <span class="childs_text">
                    {{index<10?"零":""}}{{`${minuteds}分`}}
                </span>
            </div>
        </div>
        <div class="seconds" :style="{transform:`rotate(${bjdate.second*6}deg)`}">
            <div :class="{seconds_childs:1,seconds_childs_active:index===bjdate.second}" :style="{transform:`translateY(-50%) rotate(-${index*6}deg)`}" v-for="(seconds,index) in str" :key="index">
                <span class="childs_text">
                    {{index<10?"零":""}}{{seconds}}秒
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./js/Vue3.js"></script>
    <script type="text/javascript" src="./js/mian.js"></script>
</body>
</html>